<script lang="ts" setup>
import { onlineCount, userCount } from '@/api/dataDisplay';
import { listStatistics } from '@/api/monitor/loginInfo';
import { listStatisticsByType } from '@/api/monitor/operlog';

const userTotal = ref(0);
const onlineTotal = ref(0);
const loginTotal = ref(0);
const operationTotal = ref(0);
const userLoading = ref(true);
const onlineLoading = ref(true);
const loginLoading = ref(true);
const operationLoading = ref(true);
/*获取统计数据*/
const getUserCount = async () => {
  userLoading.value = true;
  const res = await userCount();
  userLoading.value = false;
  animateValue(userTotal, res.data, 3000);
};
const getOnlineCount = async () => {
  onlineLoading.value = true;
  const res = await onlineCount();
  onlineLoading.value = false;
  animateValue(onlineTotal, res.data, 3000);
};
const getAccessCount = async () => {
  loginLoading.value = true;
  const res = await listStatistics(null);
  loginLoading.value = false;
  let total = 0;
  res.data.forEach(item => {
    total += item.count;
  });
  animateValue(loginTotal, total, 3000);
};
const getOperationCount = async () => {
  operationLoading.value = true;
  const res = await listStatisticsByType(null);
  operationLoading.value = false;
  let total = 0;
  res.data.forEach(item => {
    total += item.count;
  });
  animateValue(operationTotal, total, 3000);
};
/*动态更新数值，从起始值缓动到目标值*/
const animateValue = (refValue: { value: number }, targetValue: number, duration: number) => {
  const startValue = refValue.value;
  const startTime = performance.now();

  /* 缓动函数，创建前快后慢的效果。*/
  const easeOutQuad = (t: number) => t * (2 - t); // 缓动函数，前快后慢

  /*更新数值的递归函数，根据当前时间更新 refValue 的值。*/
  const updateValue = (currentTime: number) => {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    refValue.value = Math.round(startValue + (targetValue - startValue) * easeOutQuad(progress));

    if (progress < 1) {
      requestAnimationFrame(updateValue);
    }
  };
  /*启动动画*/
  requestAnimationFrame(updateValue);
};
onMounted(() => {
  getUserCount();
  getOnlineCount();
  getAccessCount();
  getOperationCount();
});
</script>

<template>
  <el-row :gutter="12" class="mb-4">
    <el-col :span="6">
      <a-card :loading="userLoading" hoverable>
        <el-row>
          <el-col :push="2" :span="12">
            <div class="statistic-value">{{ userTotal }}</div>
            <div class="statistic-title">用户总数</div>
          </el-col>
          <el-col :push="4" :span="12">
            <div class="statistic-icon" style="background-color: var(--el-color-info-light-9)">
              <svg-icon class="statistic-svg" color="var(--el-color-info)" icon-class="student" />
            </div>
          </el-col>
        </el-row>
      </a-card>
    </el-col>
    <el-col :span="6">
      <a-card :loading="onlineLoading" hoverable>
        <el-row>
          <el-col :push="2" :span="12">
            <div class="statistic-value">{{ onlineTotal }}</div>
            <div class="statistic-title">在线人数</div>
          </el-col>
          <el-col :push="4" :span="12">
            <div class="statistic-icon" style="background-color: var(--el-color-success-light-9)">
              <svg-icon class="statistic-svg" color="var(--el-color-success)" icon-class="binding" />
            </div>
          </el-col>
        </el-row>
      </a-card>
    </el-col>
    <el-col :span="6">
      <a-card :loading="loginLoading" hoverable>
        <el-row>
          <el-col :push="2" :span="12">
            <div class="statistic-value">{{ loginTotal }}</div>
            <div class="statistic-title">访问量</div>
          </el-col>
          <el-col :push="4" :span="12">
            <div class="statistic-icon" style="background-color: var(--el-color-warning-light-9)">
              <svg-icon class="statistic-svg" color="var(--el-color-warning)" icon-class="upload" />
            </div>
          </el-col>
        </el-row>
      </a-card>
    </el-col>
    <el-col :span="6">
      <a-card :loading="operationLoading" hoverable>
        <el-row>
          <el-col :push="2" :span="12">
            <div class="statistic-value">{{ operationTotal }}</div>
            <div class="statistic-title">操作量</div>
          </el-col>
          <el-col :push="4" :span="12">
            <div class="statistic-icon" style="background-color: var(--el-color-primary-light-9)">
              <svg-icon class="statistic-svg" color="var(--el-color-primary)" icon-class="button" />
            </div>
          </el-col>
        </el-row>
      </a-card>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
.statistic-value {
  font-size: 32px;
}

.statistic-title {
  color: rgba(164, 169, 176, 0.87);
}

.statistic-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;

  .statistic-svg {
    padding: 15px;
    font-size: 60px;
  }
}

</style>
